<template>
  <div>
    <div>
      <button @click="addRay">添加</button>
      <input type="number" v-model="segmentCount" min="1" />
    </div>
    <br />
    <div class="ray-container" v-for="(ray, index) in rays" :key="index">
      <div class="ray-line"></div>
      <div
        class="ray-tick"
        v-for="(tick, tickIndex) in ray.ticks"
        :key="tick.id"
        :style="{ left: tick.left + '%' }"
      >
        <span class="tick-label"> {{ tick.label }}</span>
      </div>
      <div class="arrow"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      segmentCount: 1,
      rays: [],
    };
  },
  created() {},
  methods: {
    generateTicks() {
      /**
       * 在这段代码中，Array.from() 的第一个参数是一个对象 { length: segmentCount + 1 }，这个对象定义了要创建的数组的长度，
       * 即刻度的数量。第二个参数是一个箭头函数，它会对数组中的每个元素执行一次。在这个箭头函数中，(_, i) 是解构赋值，
       * 表示忽略第一个参数（因为我们只关心索引 i），而 i 则是每个元素的索引值。

      箭头函数内部根据索引 i 计算了每个刻度的值，并返回一个对象，这个对象代表每个刻度，
      包含了 id、label 和 left 这三个属性。最终，Array.from() 返回了一个新的数组，这个数组包含了根据分段数计算出的刻度。
       */
      const segmentCount = parseInt(this.segmentCount);
      const tickWidth = 100 / segmentCount;
      // 使用 Array.from() 创建一个新数组，长度为 segmentCount + 1
      return Array.from({ length: segmentCount + 1 }, (_, i) => {
        console.log(i);
        const numerator = i;
        const denominator = segmentCount;
        console.log(numerator, denominator);
        const label =
          numerator === 0
            ? "0"
            : numerator === denominator
            ? "1"
            : numerator + "/" + denominator;

        return { id: Date.now() + i, label: label, left: tickWidth * i };
      });
    },
    addRay() {
      const newRay = { ticks: this.generateTicks() };
      this.rays.push(newRay);
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.ray-container {
  width: 70%;
  position: relative;
  height: 20px;
  margin-bottom: 10px;
  margin: 20px auto;
}

.ray-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: black;
  transform: translateY(-50%);
}

.ray-tick {
  width: 1px;
  height: 10px;
  background-color: #000;
  position: absolute;
  top: 29%;
  transform: translateY(-50%);
  white-space: nowrap;
}
.tick-label {
  position: absolute;
  top: 11px;
  left: -10px;
}
.arrow {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid black;
  transform: translateY(-50%);
}

button {
  margin-right: 10px;
}
</style>
